<template>
  <div>
    <el-button type="primary" @click="uploadDialog = true">{{$t('stock.Upload Table')}}</el-button>
    <el-dialog
      :title="$t('stock.Upload files')"
      :visible.sync="uploadDialog"
      width="500px"
    >
      <div style="text-align: center">
        <el-upload
          class="upload-demo"
          drag
          :action="uploadUrl"
          :on-success="uploadFileSuccess"
          :show-file-list="false"
          name="file"
          :multiple="false"
          :headers="uploadHeader"
          accept=".csv,.xlsx,.xls"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">{{$t('stock.uploadText1')}}</div>
          <div class="el-upload__tip" slot="tip">{{$t('stock.onlyUpload')}}</div>
        </el-upload>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="drawer = true">{{$t('stock.view list')}}</el-button>
      </div>
    </el-dialog>

    <el-drawer
      :title="$t('stock.File Upload List')"
      :visible.sync="drawer"
      direction="rtl"
      size="700px"
    >
      <el-table :data="drawerData">
        <el-table-column
          prop="id"
          label="ID"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="fileName"
          :label="$t('stock.file')"
          min-width="150"
        >
          <template slot-scope="{row}">
            <a :href="row.excelPath" target="_blank" class="font-blue">{{row.fileName}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          :label="$t('table.status')"
          min-width="150"
        >
          <template slot-scope="{row}">
            <template v-if="row.status === -1">
              <span class="font-red">{{row.statusStr}} <i class="el-icon-error"></i></span>
            </template>
            <template v-if="row.status === 0">
              <span class="font-blue">{{row.statusStr}} <i class="el-icon-loading"></i></span>
            </template>
            <template v-if="row.status === 1">
              <span class="font-blue">{{row.statusStr}} <template v-if="row.totalNum">{{row.currentNum}}/{{row.totalNum}}</template><i class="el-icon-loading"></i></span>
            </template>
            <template v-if="row.status === 2">
              <span class="font-green">{{row.statusStr}} <i class="el-icon-success"></i></span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="result"
          :label="$t('stock.Processing results')"
          min-width="100"
        >
          <template slot-scope="{row}">
            <template v-if="row.resultPath && row.status === 2">
              <a :href="row.resultPath" target="_blank" class="font-blue">result</a>
            </template>
            <template v-else>
              -
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

  </div>
</template>

<script>
import {getToken} from "@/utils/auth";
import {getHandleExcelList} from "@/api/excel";
import {deepCopy} from "@/utils";

export default {
  name: "UploadExcel",
  data(){
    return {
      uploadDialog: false,
      uploadUrl: `${process.env.VUE_APP_BASE_API }/excel/uploadClExcel`,
      uploadHeader: {
        Authorization: 'Bearer ' + getToken(),
      },
      drawer: false,
      drawerData: [],
      loop: null,
    }
  },
  created() {
    this.getDrawerData()
  },
  methods:{
    uploadFileSuccess(res, file) {
      if (res.error === 0) {
        this.$successMessage(res.message)
        this.getDrawerData()
        this.drawer = true;
      } else {
        this.$errorMessage(res.message);
      }
    },
    getDrawerData(){
      getHandleExcelList()
        .then(res=>{
          this.drawerData = deepCopy(res.data)
          this.setLoop();
        })
    },
    setLoop(){
      // 判断是否要不断请求
      const flag = this.drawerData.some(item=> item.status === 0);
      if(flag && this.drawer){
        // 1.5s请求一次接口
        setTimeout(()=>{
          this.getDrawerData()
        },1500);
      }

    }
  }
}
</script>

<style scoped>

</style>
